<template>
  <view>
    <nav-bar title="软件设置"></nav-bar>
    <scroll-view scroll-y :style="{ height: mainHeight }">
      <view class="table">
				<view class="row" v-for="(item, index) in tableData" :key="index">
					<view class="box">
						<view class="left">{{ item.title }}</view>
						<view class="right">
							<view class="icon">
                <img src="../../static/icon/home/color-box.png" alt="" v-if="item.color" class="color">
								<u-switch v-model="item.value" activeColor="#41da1a" v-else></u-switch>
							</view>
						</view>
					</view>
				</view>
			</view>
    </scroll-view>
    <!-- <view>
      <uv-pick-color ref="pickerColor" @confirm="confirm"></uv-pick-color>
    </view> -->
  </view>
</template>

<script>
import NavBar from '@/components/nav-bar/index.vue'
import { getToken } from "@/utils/auth"
export default {
  name: 'systemNotice',
  components: { NavBar },
  data() {
    return {
      mainHeight: '',
      tableData:[
        {
          title:'震动开关',
          value:true
        },
        // {
        //   title:'主题颜色',
        //   color:true
        // },
        // {
        //   title:'深色模式',
        //   value:true
        // },
        {
          title:'语音提示',
          value:true
        },
        {
          title:'新订单语音提示',
          value:true
        },
        {
          title:'退单语音提示',
          value:true
        },
        {
          title:'修改时间语音提示',
          value:true
        },
        {
          title:'公告消息语音提示',
          value:true
        }
      ]
    }
  },
  created() {
    this.mainHeight = this.$store.getters.heightData.noTabMainHeight + 'px'
  },
  methods: {
    toNext(item) {
		uni.navigateTo({
      url:'/subPages/mine/noticeDetail',
    })
		},
    // rowClick(item) {
    //   if(item.color) {
    //     this.$refs.pickerColor.open();
    //   }
    // },
    // openColor() {
		// 		this.$refs.pickerColor.open();
		// 	},
    confirm(e) {
    }
  }

}
</script>

<style lang="scss" scoped>
.icon {
	display: flex;
	justify-content: center;
	align-items: center;
  .color {
    width: 60rpx;
    height: 60rpx;
  }
}
	.table {
		margin: 0 35rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 18rpx 0rpx rgba(204, 204, 204, 0.25);
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		opacity: 1;
		margin-top: 24rpx;
		padding: 10rpx 20rpx 10rpx 33rpx;
		.row {
			padding: 22rpx 0 20rpx 0;
			border-bottom: 1rpx solid #f2f2f2;
			&:last-child {
				border-bottom: none;
			}
			.box {
				display: flex;
				justify-content: space-between;
				.left {
					font-size: 40rpx;
					font-family: Source Han Sans CN, Source Han Sans CN;
					font-weight: 500;
					color: #333333;
				}
				.right {
					display: flex;

					.right-text {
						font-size: 38rpx;
						font-family: Source Han Sans CN, Source Han Sans CN;
						font-weight: 400;
						color: #666666;
					}
				}
			}
		}
	}
</style>